<script>
    var reqCode = "2222";
    var emailCode = "2222";


    var emailVerify = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    var userVerify = /^.{4,10}$/;
    var passVerify = /^.{6,20}$/;
    var arrayObj = new Array();
    var clearVal = new Array();

    $(function () {
        var a = 0;
        var t = "";

        fromVerify("email", emailVerify);
        fromVerify("code", reqCode);
        fromVerify("emailCode", emailCode);


        /*
        刷新验证码
         */
        $("#changeCode").click(function (e) {
            $("#changeCode").css("background-image", "url('http://localhost:8080/LxCommunity/user/getImg?data=" + a++ + "')");
            addArr("code");
        });

        //异步请求验证码
        $("#code input").focus(function () {
            request();
        });


        /*
        登录按钮事件
         */
        $("#register").click(function () {
            if (arrayObj.length != 0) {
                for (i in arrayObj) {
                    flash('#' + arrayObj[i] + '', 8, 10, 100);
                    error(arrayObj[i]);
                }
            } else {
                prompt('登录成功', 'alert-success', 1500);
                window.location.href = "/LxCommunity";
            }
        });

        /*
        发送邮箱验证码
         */
        $("#sendCode").click(function () {

            $.ajax({
                url: "/LxCommunity/user/verifyEmail",
                data: {"email": $("#emailInput").val()},
                success: function (result) {
                    if (result == "") {
                        prompt('该邮箱未注册，请先注册', 'alert-danger', 1500);
                        return;
                    }else{
                        emailCode = random();
                        for (i in arrayObj) {
                            if (arrayObj[i] == "email") {
                                error(arrayObj[i]);
                                flash('#' + arrayObj[i] + '', 8, 10, 100);
                                return;
                            }
                        }


                        $("#sendCode").text("请稍后(30s)");
                        $("#sendCode").attr('disabled', true);
                        var a = 10;
                        t = setInterval(function () {
                            $("#sendCode").text("请稍后(" + (--a) + "s)");
                            if (a < 0) {
                                clearInterval(t);
                                $("#sendCode").text("发送验证码");
                                $("#sendCode").attr('disabled', false);
                            }
                        }, 1000);

                        // $.ajax({
                        //     url: "/LxCommunity/user/sendEmail",
                        //     data: {"code": emailCode, "recipients": $("#emailInput").val()},
                        //     success: function (result) {
                        //         //alert("发送成功！！！");
                        //         prompt('发送成功', 'alert-success', 1500);
                        //     },
                        //     error: function (e) {
                        //         prompt('发送失败', 'alert-danger', 1500);
                        //     }
                        // });
                        console.log(emailCode)
                    }
                },
                error: function (e) {
                    prompt('发送失败', 'alert-danger', 1500);
                }
            });
        });
        for (i in clearVal) {
            $("#" + clearVal[i] + " input").val("");
        }

    });


    function request() {
        $.ajax({
            url: "/LxCommunity/user/getCode",
            success: function (result) {
                //$("#emailCode input").val(result);
                reqCode = result;
            },
            error: function (e) {
                //alert(e.toString());
            }
        });
    }


    var random = function () {
        var x = 999999;
        var y = 100000;
        var rand = parseInt(Math.random() * (x - y + 1) + y);
        return rand;
    }


    /**
     * 表单验证
     * @param id id名
     * @param Verify 正表达式
     */
    function fromVerify(id, Verify) {
        arrayObj.push(id);
        clearVal.push(id);
        $("#" + id + " input").keyup(function (e) {
            var str = $(this).val();
            Render(str, id, Verify);
        });
    }


    function Render(str, id, Verify) {
        var flag;
        if (id == "code") {
            flag = str == reqCode;
        } else if (id == "emailCode") {
            flag = str == emailCode;
        } else {
            flag = Verify.test(str);
        }

        if (flag) {
            remove(id);
            success(id);
            for (i in arrayObj) {
                if (arrayObj[i] == id) {
                    arrayObj.splice(i, 1);
                }
            }
        } else {
            remove(id);
            error(id);
            addArr(id);
        }
        if (str == "") {
            remove(id);
            addArr(id);
        }
    }

    /**
     * 错误的表单样式
     * @param attr id名
     */
    function error(attr) {
        $("#" + attr + "").addClass("has-error has-feedback");
        $("#" + attr + " label").addClass("control-label");
        $("#" + attr + " label").attr("aria-describedby", "inputSuccess2Status");
        $("#" + attr + " span").attr("aria-hidden", "true");
        $("#" + attr + " span").addClass("glyphicon glyphicon-remove form-control-feedback");
    }

    /**
     * 正确的表单样式
     * @param attr id名
     */
    function success(attr) {
        $("#" + attr + "").addClass("has-success has-feedback");
        $("#" + attr + " label").addClass("control-label");
        $("#" + attr + " label").attr("aria-describedby", "inputSuccess2Status");
        $("#" + attr + " span").attr("aria-hidden", "true");
        $("#" + attr + " span").addClass("glyphicon glyphicon-ok form-control-feedback");
    }

    /**
     * 空“”的表单样式
     * @param attr id名
     */
    function remove(attr) {
        $("#" + attr + "").removeClass("has-success has-error has-feedback");
        $("#" + attr + " label").removeClass("control-label");
        $("#" + attr + " label").removeAttr("aria-describedby");
        $("#" + attr + " span").removeAttr("aria-hidden");
        $("#" + attr + " span").removeClass("glyphicon glyphicon-ok glyphicon-remove form-control-feedback");
    }


    /**
     * input 抖动效果
     * @param obj 控件
     * @param time 震动时间长——短循环长度
     * @param wh 震动幅度px
     * @param fx 动画速度s
     */
    function flash(obj, time, wh, fx) {
        $(function () {
            var $panel = $(obj);
            var offset = $panel.offset() - $panel.width();
            var x = offset.left;
            var y = offset.top;
            for (var i = 1; i <= time; i++) {
                if (i % 2 == 0) {
                    $panel.animate({left: '+' + wh + 'px'}, fx);
                } else {
                    $panel.animate({left: '-' + wh + 'px'}, fx);
                }
            }
            $panel.animate({left: 0}, fx);
            $panel.offset({top: y, left: x});

        })
    }

    /**
     * 向arrayObj添加id
     * @param id
     */
    function addArr(id) {
        var f = true;
        for (i in arrayObj) {
            if (arrayObj[i] == id) {
                f = false;
                break;
            } else {
                f = true;
            }
        }
        if (f) {
            arrayObj.push(id);
        }
    }


    /**
     *
     * @param message
     * @param style
     * @param time
     */
    var prompt = function (message, style, time) {
        style = (style === undefined) ? 'alert-success' : style;
        $('.alert').html(message).addClass('alert ' + style).show().delay(time).fadeOut();
    };

    // 成功提示
    var success_prompt = function (message, time) {
        prompt(message, 'alert-success', time);
    };

    // 失败提示
    var fail_prompt = function (message, time) {
        prompt(message, 'alert-danger', time);
    };

    // 提醒
    var warning_prompt = function (message, time) {
        prompt(message, 'alert-warning', time);
    };

    // 信息提示
    var info_prompt = function (message, time) {
        prompt(message, 'alert-info', time);
    };

</script>
<style>
    .Myalert {
        margin: 0px;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        text-align: center;
        z-index: 9999;
    }
</style>
<div class="alert Myalert"></div>
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
    <form class="input-lg">

        <div id="email" class="form-group">
            <input type="text" class="form-control input-lg" id="emailInput" placeholder="请输入你的邮箱">
            <span style="z-index:0;"></span>
        </div>

        <div class="row form-group">
            <div id="code" class="col-md-8 col-sm-8 col-xs-8">
                <input type="text" class="form-control input-lg" placeholder="请输入验证码">
                <span style="width: 55px;z-index:0;"></span>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4" style=" padding-left: 0px">
                <div id="changeCode" class="col-md-12 col-sm-12 col-xs-12 back form-control input-lg">&nbsp;</div>
            </div>
        </div>
        <div class="row form-group">
            <div id="emailCode" class="col-md-8 col-sm-8 col-xs-8">
                <input type="text" class="form-control input-lg" placeholder="请输入邮箱验证码">
                <span style="width: 55px;z-index:0;"></span>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4" style=" padding-left: 0px">
                <button id="sendCode" type="submit"
                        class="btn btn-info col-md-12 col-sm-12 col-xs-12 input-lg"
                        onClick="return false;">发送验证码
                </button>
            </div>
        </div>

        <button onClick="return false;"
                id="register" type="submit"
                class="btn btn-info col-md-12 col-sm-12 col-xs-12 input-lg">登录
        </button>
    </form>
</div>